<template>
	<section>
		<div class=" no-overflow">
			<div class="box">
				<div class="cube">
					<div class="back"><img src="@/assets/scene/litishichuang/center.jpg" alt=""></div>
					<div class="right hidden"><img src="@/assets/scene/litishichuang/right.jpg" alt=""></div>
					<div class="left hidden"><img src="@/assets/scene/litishichuang/left.jpg" alt=""></div>
					<div class="top hidden"><img src="@/assets/scene/litishichuang/top.jpg" alt=""></div>
					<div class="bottom hidden"><img src="@/assets/scene/litishichuang/bottom.jpg" alt=""></div>
					<div class="person-center"><img src="@/assets/scene/litishichuang/person-center.png" alt=""></div>
					<!-- <div class="map"><img src="a.png" alt=""></div> -->
				</div>
			</div>
		</div>
	</section>
</template>
<script>
import $ from 'jquery'

export default {
	data() {
		return {

		}
	},
	methods: {

	},
	mounted() {
		var cx = $(".cube").offset().left + $(".cube").width() / 2; //获取宽度；
		var cy = $(".cube").offset().top + $(".cube").height() / 2; //获取高度；
		//alert(cy)
		$(document).mousemove(function(e) {
			var px = e.pageX - cx;
			var py = e.pageY - cy;
			var pz = 0;
			var m = Math.sqrt(px * px + py * py + pz * pz);
			var mx = px / m;
			var my = (py / m) * 10;
			var mz = mx + my;
		})

		$(".left").hover(function() {
			$(".cube").css({
				transform: "rotate3d(1, 0, 0,0) rotate3d(0, 1, 0,-10deg) rotate3d(0, 0, 1, 0deg)"
			});
		}, function() {
			$(".cube").css({
				transform: "rotate3d(1, 0, 0,0) rotate3d(0, 1, 0,0) rotate3d(0, 0, 1, 0deg)"
			});
		});
		$(".right").hover(function() {
			$(".cube").css({
				transform: "rotate3d(1, 0, 0,0) rotate3d(0, 1, 0,10deg) rotate3d(0, 0, 1, 0deg)"
			});
		}, function() {
			$(".cube").css({
				transform: "rotate3d(1, 0, 0,0) rotate3d(0, 1, 0,0) rotate3d(0, 0, 1, 0deg)"
			});
		});

		/*                $(".cube").css({
		                    transform:"rotate3d(1, 0, 0,-"+mx+"deg) rotate3d(0, 1, 0,-"+my+"deg) rotate3d(0, 0, 1, 0deg)"
		                });*/
		var i = 0;
		setInterval(function() {
			$("body").addClass('class_name');
			setTimeout(function() {
				$("body").removeClass('class_name');
			}, 1500)
		}, 3000);
	}

}

</script>
<style>
.cube {
	transform: rotate3d(1, 0, 0, 0) rotate3d(0, 1, 0, -10deg) rotate3d(0, 0, 1, 0deg);
}

.class_name .cube {
	transform: rotate3d(1, 0, 0, 0) rotate3d(0, 1, 0, 10deg) rotate3d(0, 0, 1, 0deg);
}

.no-overflow {
	overflow: hidden;
}

.box {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	width: 100%;
	perspective: 610px;
}

.cube {
	transform-style: preserve-3d;
	position: relative;
	font-size: 80px;
	width: 1081px;
	height: 467px;
	margin: 278px auto;
	transform-origin: center center 100px;
	transition: transform 1s ease-out;
	/*transition:transform 1s linear;*/
	/*transform: rotateY(80deg);*/
}

.cube>div {
	position: absolute;
	color: white;
	text-align: center;
	line-height: 200px;
}

.top {
	width: 1081px;
	height: 467px;
	transform: rotateX(90deg) translateY(-1px) translateZ(-1px);
	transform-origin: top;
}

.right {
	width: 467px;
	height: 467px;
	transform: rotateY(90deg) translateX(2px) translateZ(613px);
	transform-origin: right;
}

.left {
	width: 467px;
	height: 467px;
	transform: rotateY(-90deg) translateX(-1px) translateZ(-1px);
	transform-origin: left;
}

.bottom {
	width: 1081px;
	height: 467px;
	transform: rotateX(-90deg) translateZ(-2px);
	transform-origin: bottom;
}

.back {
	width: 1081px;
	height: 467px;
	transform: rotateY(180deg);
}

.person-center {
	position: absolute;
	top: 105px;
}

.map {
	position: absolute;
	top: 105px;
}

</style>
